<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>{$fromid}对{$toid}说</title>
    <link rel="stylesheet" href="/static/home/iconfont/iconfont.css?v=20171128"/>
    <link rel="stylesheet" href="/static/home/css/weui.min.css"/>
    <link rel="stylesheet" href="/static/home/css/jquery-weui.min.css"/>
    <link rel="stylesheet" href="/static/home/newui/css/common.css?v=20171128"/>
    <link rel="stylesheet" href="/static/home/emoji/emoji.css"/>
    <link rel="stylesheet" href="/static/home/newui/css/swiper-3.3.1.min.css"/>
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    </script>
</head>

<body style="background-color:;">
<div id="messibox" class="flex">


    <div id="chatcon" class="messibox">
        {volist name="data" id="v"}
        {if $v['fromid'] == $fromid}
        <!--<div class="time text-c">2018-06-11 19:26:06</div> 时间-->
        <div class="right flex">
            <div class="con flex">
                <div class="kongflex"></div>
                <div class="concon">{$v['content']}</div>
                <div class="triangle-right"></div>
            </div>
            <img src="http://staticurl.oss-cn-qingdao.aliyuncs.com/images/2/2018/05/BzG6cTbxoBbt8oeC6804YB2G4bB8Y9.png" class="avatar" />
        </div>
        {else}
        <!--<div class="time text-c">2018-06-11 19:26:06</div> 时间-->
        <!--左边-->
        <div class="left flex">
            <img src="http://thirdwx.qlogo.cn/mmopen/GR7wj3CgzkVpb8rfAHiaJ9gHcJrSJCpx6lzDE1xMZEvicA4wHDPRBRyn7arSFQIBY53cIO5PCKoJPUO0Dtew34jW2Mh35YFQ0H/132" class="avatar" />
            <div class="con flex">
                <div class="triangle-left"></div>
                <div class="concon">{$v['content']}</div>
                <div class="kongflex"></div>
            </div>
        </div>
        {/if}
        {/volist}
    </div>

    <div id="messifooter" class="flex">
        <div class="jianpan iconfont hide" style="line-height:0.7rem;">&#xe689;</div>
        <div class="input">
            <textarea id="chatcontent" onkeydown="KeyDown(event)" placeholder="请输入咨询内容..."></textarea>
        </div>
        <div class="saybutton hide">按住  说话</div>
        <div class="qqface iconfont">&#xe688;</div>
        <div class="jia iconfont">&#xe687;</div>
        <div class="docomment">发送</div>
    </div>
    <div class="showmore hide">
        <div class="flex">
            <div class="item">
                <div class="itemwrap camera">
                    <div class="photo iconfont">&#xe647;</div>
                    <div class="text">上传图片</div>
                </div>
            </div>
            <div style="-webkit-box-flex:1; -moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;"></div>
        </div>
    </div>
    <div class="faces hide">
        <div class="swiper-container swiper-container-face">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img class="faceitem" src="/static/home/arclist/1.gif" data-emstr="[em_1]" /><img class="faceitem" src="/static/home/arclist/2.gif" data-emstr="[em_2]" /><img class="faceitem" src="/static/home/arclist/3.gif" data-emstr="[em_3]" /><img class="faceitem" src="/static/home/arclist/4.gif" data-emstr="[em_4]" /><img class="faceitem" src="/static/home/arclist/5.gif" data-emstr="[em_5]" /><img class="faceitem" src="/static/home/arclist/6.gif" data-emstr="[em_6]" /><img class="faceitem" src="/static/home/arclist/7.gif" data-emstr="[em_7]" /><img class="faceitem" src="/static/home/arclist/8.gif" data-emstr="[em_8]" /><img class="faceitem" src="/static/home/arclist/9.gif" data-emstr="[em_9]" /><img class="faceitem" src="/static/home/arclist/10.gif" data-emstr="[em_10]" /><img class="faceitem" src="/static/home/arclist/11.gif" data-emstr="[em_11]" /><img class="faceitem" src="/static/home/arclist/12.gif" data-emstr="[em_12]" /><img class="faceitem" src="/static/home/arclist/13.gif" data-emstr="[em_13]" /><img class="faceitem" src="/static/home/arclist/14.gif" data-emstr="[em_14]" /><img class="faceitem" src="/static/home/arclist/15.gif" data-emstr="[em_15]" /><img class="faceitem" src="/static/home/arclist/16.gif" data-emstr="[em_16]" /><img class="faceitem" src="/static/home/arclist/17.gif" data-emstr="[em_17]" /><img class="faceitem" src="/static/home/arclist/18.gif" data-emstr="[em_18]" /><img class="faceitem" src="/static/home/arclist/19.gif" data-emstr="[em_19]" /><img class="faceitem" src="/static/home/arclist/20.gif" data-emstr="[em_20]" /><img class="faceitem" src="/static/home/arclist/21.gif" data-emstr="[em_21]" /><img class="faceitem" src="/static/home/arclist/22.gif" data-emstr="[em_22]" /><img class="faceitem" src="/static/home/arclist/23.gif" data-emstr="[em_23]" /><img class="faceitem" src="/static/home/arclist/24.gif" data-emstr="[em_24]" /><img class="faceitem" src="/static/home/arclist/25.gif" data-emstr="[em_25]" /><img class="faceitem" src="/static/home/arclist/26.gif" data-emstr="[em_26]" /><img class="faceitem" src="/static/home/arclist/27.gif" data-emstr="[em_27]" /><img class="faceitem" src="/static/home/arclist/28.gif" data-emstr="[em_28]" /><img class="faceitem" src="/static/home/arclist/29.gif" data-emstr="[em_29]" /><img class="faceitem" src="/static/home/arclist/30.gif" data-emstr="[em_30]" /><img class="faceitem" src="/static/home/arclist/31.gif" data-emstr="[em_31]" /><img class="faceitem" src="/static/home/arclist/32.gif" data-emstr="[em_32]" />			</div>
                <div class="swiper-slide">
                    <img class="faceitem" src="/static/home/arclist/33.gif" data-emstr="[em_33]" /><img class="faceitem" src="/static/home/arclist/34.gif" data-emstr="[em_34]" /><img class="faceitem" src="/static/home/arclist/35.gif" data-emstr="[em_35]" /><img class="faceitem" src="/static/home/arclist/36.gif" data-emstr="[em_36]" /><img class="faceitem" src="/static/home/arclist/37.gif" data-emstr="[em_37]" /><img class="faceitem" src="/static/home/arclist/38.gif" data-emstr="[em_38]" /><img class="faceitem" src="/static/home/arclist/39.gif" data-emstr="[em_39]" /><img class="faceitem" src="/static/home/arclist/40.gif" data-emstr="[em_40]" /><img class="faceitem" src="/static/home/arclist/41.gif" data-emstr="[em_41]" /><img class="faceitem" src="/static/home/arclist/42.gif" data-emstr="[em_42]" /><img class="faceitem" src="/static/home/arclist/43.gif" data-emstr="[em_43]" /><img class="faceitem" src="/static/home/arclist/44.gif" data-emstr="[em_44]" /><img class="faceitem" src="/static/home/arclist/45.gif" data-emstr="[em_45]" /><img class="faceitem" src="/static/home/arclist/46.gif" data-emstr="[em_46]" /><img class="faceitem" src="/static/home/arclist/47.gif" data-emstr="[em_47]" /><img class="faceitem" src="/static/home/arclist/48.gif" data-emstr="[em_48]" /><img class="faceitem" src="/static/home/arclist/49.gif" data-emstr="[em_49]" /><img class="faceitem" src="/static/home/arclist/50.gif" data-emstr="[em_50]" /><img class="faceitem" src="/static/home/arclist/51.gif" data-emstr="[em_51]" /><img class="faceitem" src="/static/home/arclist/52.gif" data-emstr="[em_52]" /><img class="faceitem" src="/static/home/arclist/53.gif" data-emstr="[em_53]" /><img class="faceitem" src="/static/home/arclist/54.gif" data-emstr="[em_54]" /><img class="faceitem" src="/static/home/arclist/55.gif" data-emstr="[em_55]" /><img class="faceitem" src="/static/home/arclist/56.gif" data-emstr="[em_56]" /><img class="faceitem" src="/static/home/arclist/57.gif" data-emstr="[em_57]" /><img class="faceitem" src="/static/home/arclist/58.gif" data-emstr="[em_58]" /><img class="faceitem" src="/static/home/arclist/59.gif" data-emstr="[em_59]" /><img class="faceitem" src="/static/home/arclist/60.gif" data-emstr="[em_60]" /><img class="faceitem" src="/static/home/arclist/61.gif" data-emstr="[em_61]" /><img class="faceitem" src="/static/home/arclist/62.gif" data-emstr="[em_62]" /><img class="faceitem" src="/static/home/arclist/63.gif" data-emstr="[em_63]" /><img class="faceitem" src="/static/home/arclist/64.gif" data-emstr="[em_64]" />			</div>
                <div class="swiper-slide">
                    <img class="faceitem" src="/static/home/arclist/65.gif" data-emstr="[em_65]" /><img class="faceitem" src="/static/home/arclist/66.gif" data-emstr="[em_66]" /><img class="faceitem" src="/static/home/arclist/67.gif" data-emstr="[em_67]" /><img class="faceitem" src="/static/home/arclist/68.gif" data-emstr="[em_68]" /><img class="faceitem" src="/static/home/arclist/69.gif" data-emstr="[em_69]" /><img class="faceitem" src="/static/home/arclist/70.gif" data-emstr="[em_70]" /><img class="faceitem" src="/static/home/arclist/71.gif" data-emstr="[em_71]" /><img class="faceitem" src="/static/home/arclist/72.gif" data-emstr="[em_72]" /><img class="faceitem" src="/static/home/arclist/73.gif" data-emstr="[em_73]" /><img class="faceitem" src="/static/home/arclist/74.gif" data-emstr="[em_74]" /><img class="faceitem" src="/static/home/arclist/75.gif" data-emstr="[em_75]" />			</div>
            </div>
            <!-- Add Pagination -->
        </div>
    </div>
</div>

<!--弹出正在录音区域-->
<div class="fx-audio hide">
    <i class="audio-start"><span class="iconfont">&#xe643;</span></i>
    <p>正在录音中...</p>
</div>

<div class="blackbg hide"></div>

<script src="/static/home/newui/js/socket.io.js"></script>
<script src="/static/home/newui/js/jquery-3.1.1.min.js"></script>
<script src="/static/home/newui/js/jquery-weui.min.js"></script>
<script src="/static/home/newui/js/swiper.min.js"></script>
<script>
    var fromid = {$fromid};
    var toid = {$toid};
    var ws = new WebSocket('ws://api.b15.me:8282');
    ws.onmessage = function (e) {
        var data = eval("(" + e.data + ")")
        console.log(data);
        if (!data) {
            return;
        }
        switch (data.type) {
            case 'init':
                chat_post({client_id: data.id, type: 'bind', fromid: fromid, toid: toid});
                break;
            case 'text':
                if (data.fromid != toid) {
                    return;
                }
                var returnmsg = '<div class="concon">'+replace_em(data.content)+'</div>';
                returnmsg = '<div class="time text-c"></div>'
                    +'<div class="left flex">'
                    +'<img src="http://thirdwx.qlogo.cn/mmopen/GR7wj3CgzkVpb8rfAHiaJ9gHcJrSJCpx6lzDE1xMZEvicA4wHDPRBRyn7arSFQIBY53cIO5PCKoJPUO0Dtew34jW2Mh35YFQ0H/132" class="avatar" />'
                    +'<div class="con flex">'
                    +'<div class="triangle-left"></div>'
                    +returnmsg
                    +'<div class="kongflex"></div>'
                    +'</div>'
                    +'</div>';
                $('#chatcon').append(returnmsg).animate({scrollTop:100000},300);

                break;
            case 'login':
                $('#my').val(data.id)
                break;
            case 'loginout':
                if (data.fromid == toid) {
                    // $('.shop-online').text('已下线');
                }
                break;
            case 'online':
                if (toid == data.toid) {
                    // $('.shop-online').text(data.msg);
                }
                break;
        }
    }
</script>
<script>
    var overscroll = function (els) {
        for (var i = 0; i < els.length; ++i) {
            var el = els[i];
            el.addEventListener('touchstart', function () {
                var top = this.scrollTop
                    , totalScroll = this.scrollHeight
                    , currentScroll = top + this.offsetHeight;
                if (top === 0) {
                    this.scrollTop = 1;
                } else if (currentScroll === totalScroll) {
                    this.scrollTop = top - 1;
                }
            });
            el.addEventListener('touchmove', function (evt) {
                if (this.offsetHeight < this.scrollHeight)
                    evt._isScroller = true;
            });
        }
    };

    //禁止body的滚动事件
    document.body.addEventListener('touchmove', function (evt) {
        if (!evt._isScroller) {
            evt.preventDefault();
        }
    });

    //给class为.content的元素加上自定义的滚动事件
    overscroll(document.querySelectorAll('.messibox'));
    overscroll(document.querySelectorAll('.fx-quick'));
    overscroll(document.querySelectorAll('.othercservice'));

    $(".faces").removeClass("hide");
    var mySwiper2 = new Swiper('.swiper-container-face', {
        paginationClickable: false,
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 0,
        loop:false,
        autoplayDisableOnInteraction: false
    })
    $(".faces").addClass("hide");

    $(function(){
        domInit();
        /*var returnmsg = replace_em(msg.content);
        returnmsg = '<div class="time text-c">'+msg.datetime+'</div>'
            +'<div class="left flex">'
            +'<img src="http://thirdwx.qlogo.cn/mmopen/GR7wj3CgzkVpb8rfAHiaJ9gHcJrSJCpx6lzDE1xMZEvicA4wHDPRBRyn7arSFQIBY53cIO5PCKoJPUO0Dtew34jW2Mh35YFQ0H/132" class="avatar" />'
            +'<div class="con flex">'
            +'<div class="triangle-left"></div>'
            +returnmsg
            +'<div class="kongflex">'+msg.wwwddd+'</div>'
            +'</div>'
            +'</div>';
        $('#chatcon').append(returnmsg).animate({scrollTop:100000},300);
        */
        $("#chatcon").on("click",".sssbbb", function() {
            $.ajax({
                url:"./index.php?i=2&c=entry&do=getchatbigimg&m=cy163_customerservice",
                data:{
                    fkid:1,
                    con:$(this).attr("src"),
                },
                dataType:'json',
                type:'post',
                success:function(data){
                    if(data.error == 0){
                        var imglistjson = data.message.split(",");
                        var pb = $.photoBrowser({
                            items:imglistjson,
                            initIndex:data.index,
                        });
                        pb.open();  //打开
                    }
                },
            });
        });

        $(".swiper-container-face img").click(function(){
            $("#chatcontent").val($("#chatcontent").val()+$(this).attr("data-emstr"));
        });

        $("#chatcontent").click(function(){
            setTimeout(function(){
                $("#chatcontent").blur();
                $("#chatcontent").focus();
            },400);
        });

        $(".jia").click(function(){
            $(".faces").addClass('hide');
            $('.showmore').toggleClass('hide');
        });

        $(".qqface").click(function(){
            $(".showmore").addClass('hide');
            $(".faces").toggleClass('hide');
        });


        $('.fx-quick .can').click(function(){
            addchat($(this).text(),2,0);
            $('.fx-quick,.blackbg').addClass("hide");
        });


        $(".blackbg").on("click",function(){
            $(".fx-quick,.fansziliao,.zhuanjiediv,.kefuqrcodediv,.blackbg").addClass("hide");
        })

        $(".quick").on("click",function(){
            $(".fx-quick,.blackbg").removeClass("hide");
        })

        //点击发送按钮
        $(".docomment").on("mousedown",function(){
            addchat($("#chatcontent").val(),2,0);
        });

        //录音按钮
        $(".audio").on("click",function(){
            $(".audio,.input").addClass("hide");
            $(".jianpan,.saybutton").removeClass("hide");
        });

        //键盘
        $(".jianpan").on("click",function(){
            $(".audio,.input").removeClass("hide");
            $(".jianpan,.saybutton").addClass("hide");
        });

    });

    //发送消息到数据库
    function addchat(content,type,yuyintime){
        var data = {
            "error": 0,
            "msg": "",
            "content": "<div class=\"concon\">"+content+"<\/div>",
            "yuyincon": "",
            "datetime": ""
        };
        var returnmsg = replace_em(data.content);
        returnmsg = '<div class="time text-c">'+data.datetime+'</div>'
            +'<div class="right flex">'
            +'<div class="con flex">'
            +'<div class="kongflex text-r"></div>'
            + returnmsg
            +'<div class="triangle-right"></div>'
            +'</div>'
            +'<img src="http://staticurl.oss-cn-qingdao.aliyuncs.com/images/2/2018/05/BzG6cTbxoBbt8oeC6804YB2G4bB8Y9.png" class="avatar" />'
            +'</div>';
        $('#chatcon').append(returnmsg).animate({scrollTop:10000000},300);
        $('#chatcontent').val("");
        chat_post({data: content, type: 'say', fromid: fromid, toid: toid});
    }
    /**
     * 发送ajax请求
     * @param data
     */
    function chat_post(data) {
        $.ajax({
            url: '{:url("Chat/index")}',
            type: 'POST',
            dataType: 'JSON',
            data: data,
            success: function (data) {
                console.log(data)
            }
        })
            .done(function () {
                console.log("success");
            })
            .fail(function () {
                console.log("error");
            })
            .always(function () {
                console.log("complete");
            });
    }
    //查看QQ表情结果
    function replace_em(str){
        str = str.replace(/\[em_([0-9]*)\]/g,'<img src="/static/home/arclist/$1.gif" style="width:0.5rem;float:left;" border="0" />');
        return str;
    }
    function domInit(){
        $("#chatcon").animate({scrollTop:10000000},300);
        $('.concon').each(function(){
            $(this).html(replace_em($(this).html()));
        });
        /*$.ajax({
            url:"./index.php?i=2&c=entry&do=shangxian&m=cy163_customerservice",
            data:{
                fkid:fkid,
                type:'kefu',
            },
            dataType:'json',
            type:'post',
            success:function(data){
            },
        });*/
    }
    function KeyDown(event){
        if (event.keyCode==13){
            event.returnValue=false;
            event.cancel = true;
            addchat($("#chatcontent").val(),2,0);
        }
    }

    function playvoice(serverid,obj){
        wx.downloadVoice({
            serverId: serverid,
            success: function (res) {
                wx.playVoice({
                    localId: res.localId, // 需要播放的音频的本地ID，由stopRecord接口获得
                });
                $.ajax({
                    url:"./index.php?i=2&c=entry&do=shuaxinyuyin&m=cy163_customerservice",
                    type:'post',
                    data:{
                        content:serverid,
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.error == 0){
                            obj.remove();
                        }
                    }
                });
            }
        });
    }

</script>
<script type="text/javascript">
    var images = {
        localIds: [],
    };
    var voice = {
        localId: '',
        serverId: ''
    };
    $(function(){
        //按下录音假设全局变量已经在外部定义
        $(".saybutton").on("touchstart",function(event){
            event.preventDefault();
            $(".saybutton").text("松开  结束");
            START = new Date().getTime();
            recordTimer = setTimeout(function(){
                wx.startRecord({
                    success: function(){
                        localStorage.rainAllowRecord = 'true';
                        $(".fx-audio").removeClass('hide');
                        var num=59;
                        $(".audio-start").html('<span class="iconfont">&#xe643;</span>');
                        name = setInterval(function() {
                            if(num <= 10 && num > 0){
                                $(".audio-start").html(num);// 你倒计时显示的地方元素
                            }
                            num--;
                            if(num==0){
                                clearInterval(name);
                                END = new Date().getTime();
                                wx.stopRecord({
                                    success: function (res) {
                                        voice.localId = res.localId;
                                        $('.fx-audio').addClass("hide");
                                        var yuyintime = (END - START);
                                        uploadVoice(yuyintime);
                                    },
                                    fail: function (res) {
                                        $.toast("停止录音动作发生异常", "forbidden");
                                    }
                                });
                                $(".saybutton").text('按住  说话');
                            }
                        }, 1000);
                    },
                    cancel: function () {
                        $.toast("您拒绝授权录音", "cancel");
                    }
                });
            },300);
        });

        //松手结束录音
        $(".saybutton").on('touchend', function(event){
            event.preventDefault();
            END = new Date().getTime();
            $(".saybutton").text('按住  说话');
            $('.fx-audio').addClass("hide");
            if((END - START) < 1500){
                END = 0;
                START = 0;
                //小于300ms，不录音
                $.toast("录音时间太短", "forbidden");
                clearTimeout(recordTimer);
                wx.stopRecord();
            }else{
                wx.stopRecord({
                    success: function (res) {
                        voice.localId = res.localId;
                        var yuyintime = (END - START);
                        uploadVoice(yuyintime);
                    },
                    fail: function (res) {
                        $.toast("停止录音动作发生异常", "forbidden");
                    }
                });
            }
        });
        //上传录音
        function uploadVoice(yuyintime){
            //调用微信的上传录音接口把本地录音先上传到微信的服务器
            //不过，微信只保留3天，而我们需要长期保存，我们需要把资源从微信服务器下载到自己的服务器
            wx.uploadVoice({
                localId: voice.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res) {
                    //把录音在微信服务器上的id（res.serverId）发送到自己的服务器供下载。
                    addchat(res.serverId,6,yuyintime);
                }
            });
        }
        $('.camera').click(function(){
            wx.chooseImage({
                count: 3, // 最多选3张
                sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                success: function(res) {
                    images.localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                    var i = 0; var length = images.localIds.length;
                    var upload = function() {
                        wx.uploadImage({
                            localId:'' + images.localIds[i],
                            isShowProgressTips: 1,
                            success: function(res) {
                                var serverId = res.serverId;
                                $.ajax({
                                    url:"./index.php?i=2&c=entry&do=getmedia&m=cy163_customerservice",
                                    type:'post',
                                    data:{
                                        media_id:serverId,
                                    },
                                    dataType:'json',
                                    success:function(data){
                                        if (data.error == 1) {
                                            $.alert(data.message);
                                        } else {
                                            addchat(data.imgurl,3,0);
                                        }
                                    }
                                });
                                //如果还有照片，继续上传
                                i++;
                                if (i < length) {
                                    upload();
                                }
                            }
                        });
                    };
                    upload();
                }
            });
        });
    })

    //滚动加载
    var loading = false;  //状态标记
    var count = 2;
    $(".loadactive").click(function(){
        if(loading) return;
        loading = true;
        if(count < 2){
            setTimeout(function() {
                $.ajax({
                    url:"./index.php?i=2&c=entry&do=servicechatajax&m=cy163_customerservice",
                    data:{
                        page:count,
                        isajax:1,
                        fkid:1,
                    },
                    dataType:'html',
                    type:'post',
                    success:function(data){
                        if(data != ''){
                            $('#chatcon').prepend(data);
                            $("#chatcon").animate({scrollTop:0},300);
                            count++;
                        }
                        loading = false;
                    },
                });
            }, 500);   //模拟延迟
        }else{
            $(".loadactive").addClass('hide').removeClass("loadactive");
        }
    });
</script>

<script type="text/javascript">
    window.onpageshow = function(event){
        if (event.persisted) {
            window.location.reload();
        }
    }
</script>
</body>
</html>